<template>
  <div class="attribute-dock-container">
    <ButtonSpec v-if="widget.category === 'button'" :widget="widget"></ButtonSpec>
    <InputSpec v-else-if="widget.category === 'input'" :widget="widget"></InputSpec>
    <InputNumberSpec v-else-if="widget.category === 'inputNumber'" :widget="widget"></InputNumberSpec>
    <SwitchSpec v-else-if="widget.category === 'switch'" :widget="widget"></SwitchSpec>
    <ProcessorSpec v-else-if="widget.category === 'processor'" :widget="widget"></ProcessorSpec>
    <LevelSpec v-else-if="widget.category === 'level'" :widget="widget"></LevelSpec>
    <SliderSpec v-else-if="widget.category === 'slider'" :widget="widget"></SliderSpec>
    <DateTimeSpec v-else-if="widget.category === 'dateTime'" :widget="widget"></DateTimeSpec>
    <SpeechRecognitionSpec v-else-if="widget.category === 'speechRecognition'" :widget="widget"></SpeechRecognitionSpec>
    <CameraTrackingSpec v-else-if="widget.category === 'cameraTrack'" :widget="widget"></CameraTrackingSpec>
    <MatrixSpec v-else-if="widget.category === 'matrixPage' " :widget="widget"></MatrixSpec>
    <CameraSpec v-else-if="widget.category === 'cameraPage'" :widget="widget"></CameraSpec>
    <MeetListSpec v-else-if="widget.category === 'meetingList' && widget.type ==='componentFunction'"
                  :widget="widget"></MeetListSpec>
    <DistributeMatrixSpec v-else-if="widget.category === 'distributedMatrix'" :widget="widget"></DistributeMatrixSpec>
    <TabBarSpec v-else-if="widget.category === 'tabBarPage'" :widget="widget"></TabBarSpec>
    <!--如果组件的父组件是 TabBar，则点击组件后显示父组件的特殊属性-->
    <TabBarSpec v-else-if="isParentTabBar" :widget="widgetParent"></TabBarSpec>
    <PageViewSpec v-else-if="isParentPageView" :widget="widgetParent"></PageViewSpec>
    <SelectInputSpec v-else-if="widget.category === 'selectInput'" :widget="widget"></SelectInputSpec>
<!--    <ComponentSpec v-else-if="showComponentSpec" :widget="widget"></ComponentSpec>-->
    <UrlPlayerSpec v-else-if="widget.category === 'urlPlayer'" :widget="widget"></UrlPlayerSpec>
    <PadRelateRoomSpec v-else-if="widget.category === 'padRelatedRooms'" :widget="widget"></PadRelateRoomSpec>
    <PlatformEZLinkSpec v-else-if="widget.category === 'platformEZLink'" :widget="widget"></PlatformEZLinkSpec>
    <ScrollContainerSpec v-else-if="['scroll','listView'].includes(widget.category)"
                         :widget="widget"></ScrollContainerSpec>
    <GridViewSpec v-else-if="widget.category === 'gridView'" :widget="widget">></GridViewSpec>
    <CarouselSpec v-else-if="widget.category === 'imageVideoListPlayer'" :widget="widget"></CarouselSpec>
    <ButtonListSpec v-else-if="widget.category === 'buttonList'" :widget="widget"></ButtonListSpec>
    <DragLayoutSpec v-else-if="widget.category === 'dragLayout'" :widget="widget"></DragLayoutSpec>
    <PageViewSpec v-else-if="widget.category === 'pageView'" :widget="widget"></PageViewSpec>
	  <!--如果组件的父组件是 dragLayout，则点击组件后显示父组件的特殊属性-->
<!--	  <DragLayoutSpec v-else-if="isParentDragLayout" :widget="widgetParent"></DragLayoutSpec>-->
    <SipCallSpec v-else-if="widget.category === 'sipCall'" :widget="widget"></SipCallSpec>
    <WidgetComponentSpec v-else-if="widget.category==='deviceWidget'"  :widget="widget"></WidgetComponentSpec>
    <EmptyContent v-else :min-height="300" :image-size="150" empty-text="暂无特殊属性"></EmptyContent>


  </div>
</template>

<script>
  import {WidgetClass} from "@/modules/IDE/widget/atom/widget";
  import InputSpec from "@/page/IDE/editor/dock/specific/InputSpec.vue";
  import DateTimeSpec from "@/page/IDE/editor/dock/specific/DateTimeSpec.vue";
  import InputNumberSpec from "@/page/IDE/editor/dock/specific/InputNumberSpec.vue";
  import MatrixSpec from "@/page/IDE/editor/dock/specific/MatrixSpec.vue";
  import ComponentSpec from "@/page/IDE/editor/dock/specific/ComponentSpec.vue";
  import CameraSpec from "@/page/IDE/editor/dock/specific/CameraSpec.vue";
  import ButtonSpec from "@/page/IDE/editor/dock/specific/ButtonSpec.vue";
  import SpeechRecognitionSpec from "@/page/IDE/editor/dock/specific/SpeechRecognitionSpec.vue";
  import SwitchSpec from "@/page/IDE/editor/dock/specific/SwitchSpec.vue";
  import ScrollContainerSpec from "@/page/IDE/editor/dock/specific/ScrollContainerSpec.vue";
  import MeetListSpec from "@/page/IDE/editor/dock/specific/MeetListSpec.vue";
  import SliderSpec from "@/page/IDE/editor/dock/specific/SliderSpec.vue";
  import DistributeMatrixSpec from "@/page/IDE/editor/dock/specific/DistributeMatrixSpec.vue";
  import CameraTrackingSpec from "@/page/IDE/editor/dock/specific/CameraTrackingSpec.vue";
  import ProcessorSpec from "@/page/IDE/editor/dock/specific/ProcessorSpec.vue";
  import LevelSpec from "@/page/IDE/editor/dock/specific/LevelSpec.vue";
  import TabBarSpec from "@/page/IDE/editor/dock/specific/TabBarSpec.vue";
  import SelectInputSpec from "@/page/IDE/editor/dock/specific/SelectInputSpec.vue";
  import UrlPlayerSpec from "@/page/IDE/editor/dock/specific/UrlPlayerSpec.vue";
  import PadRelateRoomSpec from "@/page/IDE/editor/dock/specific/PadRelateRoomSpec.vue";
  import PlatformEZLinkSpec from "@/page/IDE/editor/dock/specific/PlatformEZLinkSpec.vue";
  import GridViewSpec from "@/page/IDE/editor/dock/specific/GridViewSpec.vue";
  import CarouselSpec from "@/page/IDE/editor/dock/specific/CarouselSpec.vue";
  import ButtonListSpec from "@/page/IDE/editor/dock/specific/ButtonListSpec.vue";
  import DragLayoutSpec from "@/page/IDE/editor/dock/specific/DragLayoutSpec.vue";
  import PageViewSpec from "@/page/IDE/editor/dock/specific/PageViewSpec.vue";
  import SipCallSpec from "@/page/IDE/editor/dock/specific/SipCallSpec.vue";
  import WidgetComponentSpec from "@/page/IDE/editor/dock/specific/WidgetComponentSpec.vue";
  import {WidgetFactory} from "@/modules/IDE/widgetFactory";

  export default {
    name: "AttributeDock",
    components: {
      ProcessorSpec,
      CameraTrackingSpec,
      DistributeMatrixSpec,
      SliderSpec,
      MeetListSpec,
      SwitchSpec,
      SpeechRecognitionSpec,
      ButtonSpec,
      CameraSpec,
      ComponentSpec,
      MatrixSpec,
      InputNumberSpec,
      DateTimeSpec,
      InputSpec,
      TabBarSpec,
      LevelSpec,
      SelectInputSpec,
      UrlPlayerSpec,
      ScrollContainerSpec,
      PadRelateRoomSpec,
      PlatformEZLinkSpec,
      GridViewSpec,
      CarouselSpec,
      ButtonListSpec,
      DragLayoutSpec,
      PageViewSpec,
      SipCallSpec,
      WidgetComponentSpec
    },
    props: {
      editorType: {
        type: String,
        default: 'room', // room/component
      },
      widget: {
        type: WidgetClass,
        default: () => {
          return {};
        },
      },
    },
    data() {
      return {};
    },
    computed: {
      widgetParent() {
        return WidgetFactory.getWidgetById(this.widget.parentId);
      },
      isParentTabBar() {
        if (!this.widget.parentId) return false;
        if (!this.widgetParent) return false;
        return this.widgetParent.category === 'tabBarPage';
      },
	    isParentDragLayout() {
        if (!this.widget.parentId) return false;
        if (!this.widgetParent) return false;
        return this.widgetParent.category === 'dragLayout';
      },
      isParentPageView() {
        if (!this.widget.parentId) return false;
        if (!this.widgetParent) return false;
        return this.widgetParent.category === 'pageView';
      },
      showComponentSpec() {
        if (this.editorType === 'component') return false;
        return ['componentComposite', 'componentDevice'].includes(this.widget.type);
      }
    },
    methods: {},
  }
</script>

<style scoped lang="less">
  .attribute-dock-container {
    height: calc(100vh - 90px);
    overflow: auto;

    /deep/ .el-collapse {
      .el-collapse-item__header {
        padding-left: 10px !important;
        font-size: 14px;
      }

      .el-collapse-item__content {
        padding-bottom: 10px !important;
      }
    }

    /deep/ .el-table {
      th {
        height: 34px;
        padding: 4px 0 !important;
        font-size: 12px !important;
      }

      .cell {
        padding: 0 4px !important;

        .el-input__inner {
          padding: 0 8px !important;
        }
      }
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }
</style>
